<template>
  <fragment class="navMenu">
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->
      <el-menu-item v-if="!navMenu.children" :key="navMenu.menuId" :data="navMenu" :index="String(navMenu.menuUrl+'/'+navMenu.menuId)">
<!--        <i :class="navMenu.menuIcon"></i>-->
        <span slot="title" class="el-menu-item-text">{{navMenu.menuName}}</span>
      </el-menu-item>
      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.children"
                  :key="navMenu.menuId" :data="navMenu" :index="String(navMenu.menuId)">
        <template slot="title">
<!--          <i :class="navMenu.menuIcon"></i>-->
          <span slot="title" class="menuText"> {{navMenu.menuName}}</span>
        </template>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
    </template>

  </fragment>
</template>

<script>
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {}
    },
    methods: {}
  }
</script>

<style>
  .menuText{
    margin-left: 12px;
  }
</style>
